import { getSpriteIcon } from '../../utils/sprite'

const defaultOptions = {
  pointer: { x: 0, y: 0 },
  canvas_w: 250,
  canvas_h: 300,

  header_h: 50, // 标题-高度
  header_fontSize: 28, // 标题字体大小

  c_top: 20, // 内容相对位置-top
  c_right: 20, // 内容相对位置-right
  c_bottom: 20,
  c_left: 20,

  font_size: 18,
  font_color: '#000',
  line_h: 30, // 每一行的高度
  label_w: 100, // 图层名称的长度
  icon_w: 60, // 图样的长度
  val_w: 60 // 分段值的长度
}
const graphic = {
  icon_w: 20, // 图标的大小
  icon_h: 20,
  line_h: 4, // 线高
  fill_h: 20 // 面高
}
const defaultMes = {
  title: 'ddd',
  legend: [
    { type: 'point', label: '哈哈哈', icon: 'aquarium-15' },
    { type: 'line', label: '仙儿', color: 'green' },
    { type: 'fill', label: '五菱', color: 'blue', texure: 'srmdd' }, // color 或者 texure
    { type: 'step', label: '雅迪', steps: [
      { label: '<10', type: 'fill', color: '#61EE67' },
      { label: '<100', type: 'fill', color: '#EBF55F' },
      { label: '<1000', type: 'fill', color: '#C64521' },
      { label: '<100', type: 'fill', color: '#C64521' },
      { label: '<100', type: 'fill', color: '#C64521' }
    ] }]
}

// draw item
/**
 * 绘制label
 * @param {*} ctx
 * @param {*} mes
 * @param {*} opts
 */
function drawLabel(ctx, mes, opts, position = 'center') { // left center right
  ctx.save()

  const pointer = opts.pointer
  ctx.fillStyle = opts.font_color
  const { label, color } = mes
  const { width, height = opts.font_size } = ctx.measureText(label)
  const { x, y } = cacleOffset_x_y(opts.label_w, opts.line_h, width, height, position)
  ctx.fillText(label, pointer.x + x, pointer.y + y)

  ctx.restore()
}
function drawIcon(ctx, mes, opts, position = 'left') {
  const pointer = opts.pointer

  return new Promise((resolve, reject) => {
    const icon = getSpriteIcon(mes.icon || mes.texure)
    if (icon) {
      const { x, y } = cacleOffset_x_y(opts.icon_w, opts.line_h, graphic.icon_w, graphic.icon_h, position)
      const img = new Image()
      img.onload = e => {
        ctx.drawImage(img, icon.x, icon.y, icon.width, icon.height, pointer.x + x, pointer.y + y, graphic.icon_w, graphic.icon_h)
        // opts.pointer.x = 0 & (opts.pointer.y += opts.line_h)
        resolve(img)
      }
      img.src = icon.icon
    } else {
      reject(new Error('获取sprite中的icon失败'))
    }
  })
}
function drawVal(ctx, mes, opts, position = 'center') {
  ctx.save()

  const pointer = opts.pointer
  ctx.fillStyle = opts.font_color
  const { label, color } = mes
  const { width, height = opts.font_size } = ctx.measureText(label)
  const { x, y } = cacleOffset_x_y(opts.val_w, opts.line_h, width, height, position)
  ctx.fillText(label, pointer.x + x, pointer.y + y)

  ctx.restore()
}
function drawLineRect(ctx, mes, opts, position = 'center') {
  ctx.save()

  const pointer = opts.pointer
  const { label, color } = mes
  ctx.fillStyle = color // 线色
  const { x, y } = cacleOffset_x_y(opts.icon_w, opts.line_h, opts.icon_w, graphic.line_h, position)
  ctx.fillRect(pointer.x + x, pointer.y + y, opts.icon_w, graphic.line_h)

  ctx.restore()
}
function drawFillRect(ctx, mes, opts, position = 'center') {
  ctx.save()

  const pointer = opts.pointer
  const { label, color } = mes
  ctx.fillStyle = color // 填充色
  const { x, y } = cacleOffset_x_y(opts.icon_w, opts.line_h, opts.icon_w, graphic.fill_h, position)
  ctx.fillRect(pointer.x + x, pointer.y + y, opts.icon_w, graphic.fill_h)

  ctx.restore()
}
function drawStepRect(ctx, mes, opts, position = 'left') {
  ctx.save()

  const pointer = opts.pointer
  const { label, color } = mes
  ctx.fillStyle = color // 填充色
  const { x, y } = cacleOffset_x_y(opts.icon_w, opts.line_h, opts.icon_w * 0.75, graphic.fill_h, position)
  ctx.fillRect(pointer.x + x, pointer.y + y, opts.icon_w * 0.75, graphic.fill_h)

  ctx.restore()
}
// utils
/**
 * 计算图形(矩形、文字)在容器中居中时的top和left
 * @param {number} c_width 容器的宽
 * @param {number} c_height 容器的高
 * @param {number} width 图形的宽
 * @param {number} height 图形的高
 * @returns {x, y}
 */
function cacleOffset_in_center(c_width, c_height, width, height) {
  const x = (c_width - width) / 2
  const y = (c_height - height) / 2

  return {
    x, y
  }
}
// 计算图形(矩形、文字)在容器中居左时的top和left
function cacleOffset_in_left(c_width, c_height, width, height) {
  const x = 0
  const y = (c_height - height) / 2

  return {
    x, y
  }
}
// 计算图形(矩形、文字)在容器中居右时的top和left
function cacleOffset_in_right(c_width, c_height, width, height) {
  const x = c_width - width
  const y = (c_height - height) / 2

  return {
    x, y
  }
}

function cacleOffset_x_y(c_width, c_height, width, height, position) {
  if (position === 'left') {
    return cacleOffset_in_left(c_width, c_height, width, height)
  } else if (position === 'right') {
    return cacleOffset_in_right(c_width, c_height, width, height)
  } else {
    return cacleOffset_in_center(c_width, c_height, width, height)
  }
}

function copyLegendOpts() {
  return JSON.parse(JSON.stringify(defaultOptions))
}

function getLegendOpts() {
  return copyLegendOpts()
}

export {
  copyLegendOpts, getLegendOpts,
  drawLabel, drawIcon, drawVal, drawLineRect, drawFillRect, drawStepRect,
  cacleOffset_x_y
}
